// JSX语法糖————特点可以让我们使用JS和HTML一起来写
/* 
  1.必须要有一个根标签
  2.标签必须要有关闭标记
  3.关键词冲突
    class————》className
    for—————》htmlFor
 */

import React from 'react';
//通过解构的方式解构出来createRoot
import { createRoot } from 'react-dom/client';
import './base.css';

// // React.createElement(标签，{属性名：属性值},标签的内容)
// const li1 = React.createElement('li', {}, '苹果');
// const li2 = React.createElement('li', {}, '香蕉');
// const li3 = React.createElement('li', {}, '西瓜');

// // 单线程自上而下执行！
// const ul = React.createElement(
//   'ul',
//   { className: 'box', id: 'boxID' },
//   li1,
//   li2,
//   li3
// );

// 必须要有一个根节点,如果需要写多个dom，那么请用一个盒子包起来
// 可以使用<></>,本质上就是<React.Fragment>的语法糖
const ul = (
  // <React.Fragement></React.Fragement>
  <>
    <ul className="box" id="boxID">
      <li>苹果</li>
      <li>香蕉</li>
      <li>西瓜</li>
    </ul>
    {/* style={{ color: 'blue' }}行内样式写法 */}
    <ul id="boxID" style={{ color: 'blue' }}>
      <li>苹果2</li>
      <li>香蕉2</li>
      <li>西瓜2</li>
    </ul>

    {/* 通过id绑定box给input框 */}
    <input type="text" id="box" />
    {/* htmlFor="box"激活input框，htmlFor只能设置给label标签 */}
    <label htmlFor="box" className="label_test">
      点我等于点input
    </label>
  </>
);

// 这是React18版本新出的挂载节点的方法
const root = createRoot(document.getElementById('root'));
root.render(ul);
